<template>
    <div>
        <el-dialog :title="form.id?'修改门店':'添加门店'" :visible.sync="dialogVisible" width="40%" :before-close="handleClose"
            center>
            <el-form ref="form" :model="form" label-width="80px" class="form" label-position="left">
                <div class="left">
                    <el-form-item label="店名">
                        <el-input v-model="form.name" style="width:200px"></el-input>
                    </el-form-item>
                    <el-form-item label="手机号">
                        <el-input v-model="form.tel" style="width:200px"></el-input>
                    </el-form-item>
                    <el-form-item label="营业时间">
                        <el-time-select style="width:100px" :placeholder="startTime" v-model="form.startTime"
                            :picker-options="{
                                start: '08:30',
                                step: '00:15',
                                end: '18:30'
                            }">
                        </el-time-select>
                        <el-time-select style="width:100px" :placeholder="endTime" v-model="form.endTime"
                            :picker-options="{
                                start: '08:30',
                                step: '00:15',
                                end: '18:30',
                                minTime: startTime
                            }">
                        </el-time-select>
                    </el-form-item>
                    <el-form-item label="服务范围">
                        <el-select v-model="form.services" placeholder="请选择" clearable style="width:200px">
                            <el-option v-for="item in type" :key="item.id" :label="item.name" :value="item.name">
                            </el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item label="店主">
                        <el-input v-model="form.username" style="width:200px"></el-input>
                    </el-form-item>
                    <el-form-item label="门店介绍">
                        <el-input type="textarea" v-model="form.intro" style="width:200px"></el-input>
                    </el-form-item>
                </div>
                <div class="right">
                    <el-form-item label="门店地址">
                        <el-input v-model="form.address" style="width:200px"></el-input>
                    </el-form-item>
                    <el-form-item label="门店logo">
                        <el-upload class="avatar-uploader" action="http://estate.eshareedu.cn/estate/api/upload/add"
                            :show-file-list="false" :on-success="handleAvatarSuccess"
                            :headers="{ Authorization: token }" :before-upload="beforeAvatarUpload">
                            <img v-if="imageUrl" :src="imageUrl" class="avatar">
                            <i v-else class="el-icon-plus avatar-uploader-icon"></i>
                        </el-upload>
                    </el-form-item>
                    <el-form-item label="联系电话">
                        <el-upload class="upload-demo" action="https://jsonplaceholder.typicode.com/posts/"
                            :on-preview="handlePreview" :on-remove="handleRemove" :before-remove="beforeRemove" multiple
                            :limit="3" :on-exceed="handleExceed" :file-list="fileList">
                            <el-button size="small" type="primary">点击上传</el-button>
                            <div slot="tip" class="el-upload__tip">只能上传jpg/png文件，且不超过500kb</div>
                        </el-upload>
                    </el-form-item>
                </div>
            </el-form>
            <span slot="footer" class="dialog-footer">
                <el-button @click="qu">取 消</el-button>
                <el-button type="primary" @click="add">确 定</el-button>
            </span>
        </el-dialog>
    </div>
</template>

<script>
import { ervices, storesadd } from '@/api/stores'
const token = sessionStorage.getItem('token')
export default {
    props: {
        dialogVisible: {
            type: Boolean,
            default: false
        },
        handleClickdata: {
            type: Object,
            default: () => { }
        }
    },
    data() {
        return {
            token: token,
            form: {

            },
            imageUrl: '',
            startTime: '8:30',
            endTime: '21:30',
            fileList: [],
            type: [],
            logos: [],
            imgage: "http://estate.eshareedu.cn/estate/upload/",
        };
    },
    created() {
        this.getervices()
    },
    watch: {
        handleClickdata: {
            handler(val) {
                if (val) {
                    this.form = val
                    console.log(val);
                    for (let i in this.form) {
                        this.form[i] = val[i]
                        if (i === 'logo') {
                            this.imageUrl = this.imgage + val[i]
                        }
                    }
                }
            }
        }
    },
    methods: {
        // 添加
        async add() {
            let res = await storesadd(this.form)
            if (res.errCode == 10000) {
                let msg = this.form.id ? '修改成功' : '添加成功'
                this.$message({
                    message: msg,
                    type: 'success',
                });
                this.form = {}
                this.imageUrl = ''
            }
            this.$emit("isclose", false, true)
        },
        // 服务范围
        async getervices() {
            let res = await ervices()
            if (res.errCode == 10000) {
                this.type = res.data.list
            }
        },
        handleClose(done) {
            this.$confirm('确认关闭？')
                .then(_ => {
                    this.$emit("isclose", false)
                    this.form = {}
                    this.imageUrl = ''
                })
                .catch(_ => { });
        },
        qu() {
            this.$emit("isclose", false)
            this.form = {}
            this.imageUrl = ''
        },
        handleAvatarSuccess(res, file) {
            if (res.errCode == 10000) {
                this.form.logo = res.data
            }
            this.imageUrl = URL.createObjectURL(file.raw);
        },
        beforeAvatarUpload(file) {
            const isJPG = file.type === 'image/jpeg';
            const isLt2M = file.size / 1024 / 1024 < 2;

            if (!isJPG) {
                this.$message.error('上传头像图片只能是 JPG 格式!');
            }
            if (!isLt2M) {
                this.$message.error('上传头像图片大小不能超过 2MB!');
            }
            return isJPG && isLt2M;
        },
        handleRemove(file, fileList) {
            console.log(file, fileList);
        },
        handlePreview(file) {
            console.log(file);
        },
        handleExceed(files, fileList) {
            this.$message.warning(`当前限制选择 3 个文件，本次选择了 ${files.length} 个文件，共选择了 ${files.length + fileList.length} 个文件`);
        },
        beforeRemove(file, fileList) {
            return this.$confirm(`确定移除 ${file.name}？`);
        }
    }
}
</script>

<style lang="less" scoped>
.form {
    display: flex;
    padding: 0 20px;
    min-width: 300px;
    margin: auto;
}

.left {
    flex: 1
}

.right {
    flex: 1;
    margin: auto
}

.avatar-uploader /deep/.el-upload {
    border: 1px dashed #d9d9d9;
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
}

.avatar-uploader .el-upload:hover {
    border-color: #409EFF;
}

.avatar-uploader-icon {

    font-size: 28px;
    color: #8c939d;
    width: 80px;
    height: 80px;
    line-height: 80px;
    text-align: center;
}

.avatar {
    width: 80px;
    height: 80px;
    display: block;
}
</style>